<script setup>
/**
 * & 文件引入区域
 */
import { onMounted, ref, nextTick } from "vue";
import { useRoute } from "vue-router";
import { getItemComData, getItemEvaluate, getShopInfoByShopidApi } from "@/server/api/itemApi";
import {
  userFollowItemFun,
  userUnfollowFun,
  isItemFollowFun,
  itemFansSumFun,
  shopFansNum,
  isfollow,
} from "@/hook/ItemFollow";
import { useUseStore } from "@/stores/user";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
/**
 * & 变量声明区
 */
const showBox = ref(0);
const tagList = ["item.allProducts", "item.appraise"];
const route = useRoute();
const itemId = ref(); // 店铺Id
const userId = useUseStore().userId;
const publisherData = ref({}); // 店铺信息
const itemComData = ref([]); // 商品列表
const itemEvaluateData = ref([]); // 评论列表
const baseUrl = useUseStore().ing; // 图片基础路径
// 评论请求参数
const ItemEvaluateReq = ref({
  itemId: "",
  page: 1,
  limit: 10,
});
const loading = ref(false); // 是否正在加载
const finished = ref(false); // 是否全部加载完成
/**
 * & 函数区
 */
// 获取商品列表
const getItemInfoFun = async () => {
  try {
    const { data } = await getItemComData({
      itemId: route.query.itemId,
      page: 1,
      limit: 10,
      price: false,
    });
    const dataList = data.data.data || [];
    dataList.forEach((item) => {
      if (item.avatarImg) {
        item.originPath = item.avatarImg;
      }
    });
    itemComData.value = dataList;
    console.log("网店商品列表", itemComData.value);
  } catch (error) {
    console.error("获取商品列表失败:", error);
  }
};

// 获取评论列表（支持分页）
const getItemEvaluateFun = async () => {
  if (finished.value) return;
  loading.value = true;
  try {
    ItemEvaluateReq.value.itemId = route.query.itemId;
    const { data } = await getItemEvaluate(ItemEvaluateReq.value);

    const list = data.data.data || [];
    if (list.length < ItemEvaluateReq.value.limit) {
      finished.value = true;
    }

    // 累加评论数据
    itemEvaluateData.value = [...itemEvaluateData.value, ...list];
    loading.value = false;
    ItemEvaluateReq.value.page++;
  } catch (error) {
    console.error("获取评论列表失败:", error);
  } finally {
    loading.value = false;
  }
};

// 获取店铺信息
const getShopInfoByShopidFun = async () => {
  try {
    const res = await getShopInfoByShopidApi(route.query.itemId);
    if (res.data.code === 200) {
      publisherData.value = res.data.data[0] || {};
      await nextTick();
    }
  } catch (error) {
    console.error("获取店铺信息失败:", error);
  }
};

// 页面挂载时执行
onMounted(() => {
  itemId.value = route.query.itemId;
  getShopInfoByShopidFun();
  isItemFollowFun(itemId.value, userId);
  itemFansSumFun(itemId.value);
  getItemInfoFun();
  getItemEvaluateFun();
});

</script>

<template>
  <div class="publisherPage">
    <!-- 页头 -->
    <div class="top">
      <PageTop :bg="'#f5f5f5'" />
    </div>

    <!-- 商家信息 -->
    <div class="publisherBox" v-if="publisherData && Object.keys(publisherData).length">
      <PublisherBox :type="2" :borr="34" @userFollowItemFun="userFollowItemFun(itemId)"
        @userUnfollowFun="userUnfollowFun(itemId)" :data="publisherData" :isfollow="isfollow" :fans="shopFansNum"
        :itemId="itemId" />
    </div>

    <!-- 选项卡 -->
    <div class="tabBar">
      <div :class="['item', showBox == i ? 'con' : '']" v-for="(item, i) in tagList" @click="showBox = i" :key="i">
        {{ $t(item) }}
      </div>
    </div>

    <!-- 商品列表 -->
    <div class="shopList" v-show="showBox == 0">
      <ProductsList :bg="'#fff'" :data="itemComData" />
    </div>

    <!-- 评论 -->
    <div class="appraise" v-show="showBox == 1">
      <van-list v-model:loading="loading" :finished="finished" :immediate-check="false" finished-text="没有更多了"
        @load="() => { console.log('load 触发'); getItemEvaluateFun(); }">
        <div class="item" v-for="item in itemEvaluateData" :key="item.evaluateId">
          <div class="user">
            <img :src="item.userImage || '/images/Home/pipayshop_home.png'" alt="暂无数据" />
            <div class="right">
              <div class="name">{{ item.userName }} <van-rate class="rate" size="15" v-model="item.score"
                  color="rgb(255, 210, 30)" readonly /></div>
              <div class="purchase"><span>{{ item.createTime }}</span> </div>
            </div>
          </div>
          <div class="text">{{ item.evaluate }}</div>
        </div>
      </van-list>

      <!-- 无评论 -->
      <div v-if="!itemEvaluateData || itemEvaluateData.length === 0" class="empty">
        <van-empty description="暂无评论" />
      </div>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.publisherPage {
  overflow: hidden;
  /* 禁用外层的滚动，避免冲突 */

  &::-webkit-scrollbar {
    display: none;
  }

  >.top {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: max-content;

    z-index: 200;
  }

  .item.con {
    color: #642e8e !important;
  }

  .publisherBox {
    background: #fff;
    padding-bottom: 26rem;
    margin-bottom: 8rem;
    border-radius: 12rem;
    box-shadow: 0 4rem 10rem rgba(0, 0, 0, 0.1);

    :deep(.publisher) {
      border-radius: 0;
    }
  }

  .tabBar {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 11rem 17rem 10rem;

    position: sticky;
    top: 40rem;
    z-index: 100;

    >.item {
      font-size: 14rem;
      line-height: 20rem;
      font-weight: 500;
      color: #999;
      margin-right: 50rem;
    }
  }

  .shopList {
    >.products {
      min-height: 66vh;
    }

    >.selectBar {
      margin-bottom: 9rem;
      padding: 6rem 13rem 5rem;
      background: #fff;
      position: sticky;
      top: 80rem;
      display: flex;
      align-items: center;
      box-shadow: 5rem 0rem 8rem -5rem rgba(0, 0, 0, 0.5);

      >.item {
        font-size: 12rem;
        line-height: 16rem;
        font-weight: 500;
        margin-right: 36rem;

        &:last-of-type {
          margin-right: 9rem;
        }
      }
    }
  }

  .appraise {
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

  }


  .appraise .item {
    margin-bottom: 20rem;
    border-bottom: 1px solid #f0f0f0;
  }

  .appraise .user {
    padding: 0 7rem;
    display: flex;
    align-items: center;
    color: #333;
    font-weight: 500;

  }

  .appraise .user img {
    width: 40rem;
    height: 40rem;
    border-radius: 50%;
    margin-right: 10rem;
  }

  .appraise .right .name {
    font-size: 16rem;
    line-height: 16rem;
    font-weight: 500;
    margin-bottom: 3rem;
  }

  .appraise .right .purchase {
    font-size: 13rem;
    font-weight: 400;
    color: rgba(204, 204, 204, 1);
  }

  .appraise .text {
    margin: 20rem 10rem 13rem;
    font-size: 16rem;
    line-height: 20rem;
    color: #333;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
  }



}
</style>
